<template>
	<view>
		<view class="uni-header">
			<view class="uni-group">
				<button class="uni-button" type="default" size="mini" @click="navigateTo('./add',true)">新增主菜单</button>
				<button class="uni-button" type="default" size="mini" @click="navigateTo('./list')">列表菜单</button>
			</view>
		</view>
		<view class="uni-container">
			<ly-tree :tree-data="treeData" :ready="ready" :props="props" node-key="_id" highlightCurrent showNodeIcon
			 defaultExpandAll :expandOnClickNode="false" :showActions="true" @node-expand="handleNodeExpand" @node-click="handleNodeClick"
			 @node-extbutton-click="handleNodeExtButtonClick">
			</ly-tree>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	const cmd = db.command;
	const dbCollectionName = 'opendb-admin-menus'
	export default {
		data() {
			return {
				query: '',
				where: '',
				treeData: [],
				ready: false, // 这里用于自主控制LyTree 的 loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
				props: function() {
					return {
						// 这里的label就可以使用函数进行自定义的渲染了
						label(data, node) {
							/* return (node.data.sort ? node.data.sort + "-" : "--") + node.data.name + "\t" + node.data.menu_id + "\t" + node
								.data.url; */
							return [
								(node.data.sort ? node.data.sort + " - " : " -- ") + node.data.name,
								node.data.menu_id,
								node.data._id,
								node.data.url,
								node.data.enable ? '已启用' : '未启用'
							]
						},
						//label: 'name', // 指把数据中的‘personName’当做label也就是节点名称
						icon(data, node) {
							if (node.data.parent_id == "") {
								return ""
							}
						}
					}
				},
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData() {
				var that = this
				db.collection(dbCollectionName)
					.field("sort,name,menu_id,pid,parent_id,url,enable")
					.orderBy("parent_id asc,sort asc")
					.get({
						getTree: true
					})
					.then((res) => {
						that.treeData = res.result.data
						console.log("treeData", that.treeData);
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					}).finally(() => {
						that.ready = true // 关闭tree控件的等待loading
					})
			},
			navigateTo(url, clear) {
				// clear 表示刷新是否自动刷新，true 表示刷新
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							if (clear) {
								this.loadData()
							}
						}
					}
				})
			},
			// 多选处理
			selectedItems() {
				// var dataList = this.$refs.udb.dataList
				// return this.selectedIndexs.map(i => dataList[i]._id)
			},
			//批量删除
			delTable() {
				// this.$refs.udb.remove(this.selectedItems())
			},
			// 多选
			selectionChange(e) {
				// this.selectedIndexs = e.detail.index
			},
			confirmDelete(id) {
				// this.$refs.udb.remove(id)
			},
			handleNodeClick(obj) { // 点主节点文字，进入修改页面
				// console.log('handleNodeClick', JSON.stringify(obj));
				//this.navigateTo('./edit?id=' + obj.data._id, true)
			},
			handleNodeExpand(obj) {
				// console.log('handleNodeExpand', JSON.stringify(obj));
			},
			handleNodeExtButtonClick(obj) {
				var that = this
				// console.log('handleNodeExtButtonClick', JSON.stringify(obj));
				switch (obj.buttonvalue) {
					case "del": //删除
						uni.showModal({
							content: "确认删除？",
							success(res) {
								if (res.confirm) {
									db.collection(dbCollectionName).where(cmd.or({
											_id: obj.data._id
										}, {
											parent_id: obj.data._id
										})).remove()
										.then((res) => {
											that.loadData()
										})
										.catch((err) => {
											console.log(err.message)
										})
										.finally(() => {

										})
								}
							}
						})

						break;
					case "newchildren": // 新增子女
						this.navigateTo('./add?parent_id=' + obj.data.menu_id + '&pid=' + obj.data._id + '&parent_name=' + obj.data.name,
							true)
						break;
					case "edit": // 修改
						this.navigateTo('./edit?id=' + obj.data._id, true)
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>

</style>
